<template>
  <div class="hander-container">
    <div class="input-form">
      <el-input
        v-model="input1"
        type="string"
        class="w-50 m-2"
        size="default"
        :placeholder="Menu.placeholder"
        :prefix-icon="Search"
        @keydown.enter="SearchSong"
      />
    </div>
    <div class="hander-Title">
        <h1>{{Menu.searchTitle}}</h1>
    </div>
    <div>
      <div class="basic--circle">
        <el-dropdown>
             <div class="block">
                <el-avatar :size="50" :src="circleUrl"  @click="open()" />
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item >设置</el-dropdown-item>
                <el-dropdown-item @click="breakLogin">退出</el-dropdown-item>

              </el-dropdown-menu>
            </template>
          </el-dropdown>
      </div>
    </div>
  </div>

  <el-dialog v-model="dialogFormVisible" title="用户登录" width="400px" >
    <el-form :model="form">
      <el-form-item label="手机号码" :label-width="formLabelWidth">
        <el-input v-model="form.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="form.password" autocomplete="off"  show-password/>
      </el-form-item>
    </el-form>

    <template #footer>
      
      <span class="dialog-footer">
         <el-button type="danger" @click="chenageAuth" 
          >{{loginFormButn}}</el-button
        >
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="loginButn"
          >登入</el-button
        >
      </span>
    </template>
  </el-dialog>
  
</template>

<script lang="ts">
import { defineComponent,  ref , } from "vue";
import { Search } from "@element-plus/icons-vue";
import { reactive, toRefs } from "vue";
import {useStore} from 'vuex';
import {useRouter} from 'vue-router';
import {alertMessage} from '../../Hook/index';

export default defineComponent({
  name: "MyHeader",

  setup(props, context) {
    const input1 = ref("");
    const store = useStore()
    const loginFormButn = ref("扫码登入")
    const auth = ref(false)

    const open = ()=>{
      if(localStorage.getItem('token')){
        alertMessage('登入','当前已有用户登录','warning')
        return
      }
      dialogFormVisible.value = true
    }
    const state = reactive({
      circleUrl: JSON.parse(localStorage.getItem('Profile') || '0').avatarUrl || "/src/assets/hander.jpg",
        
    });
    const router = useRouter()
    const SearchSong = ()=>{
      router.push('/searchsong')
    }
    const { circleUrl } = toRefs(state);

    let dialogFormVisible = ref(false);
    const formLabelWidth = "80px";
    const form = reactive({
      phone: "",
      password: ""
    });
      
    /**
     * 登录校验
     */
    const loginButn = async ()=>{
      const code = await store.dispatch("hander/login", form)
      if(code === 200){
        dialogFormVisible.value = false
        location.reload()
      }
    }

    const breakLogin =  ()=>{
      if(!localStorage.getItem('token')){
            alertMessage('注销','账户注失败, 当前没有用户名!')
            return
      }
      store.dispatch("hander/breakLogin")
        location.reload()
    }

    const chenageAuth = ()=>{
      auth.value = !auth.value
      if(auth.value){
        loginFormButn.value = "账户密码登入"
      }else{
        loginFormButn.value = "扫码登入"
      }
    } 
    return {
      input1,
      Search,
      circleUrl,
      Menu: store.state.hander.HanderMenu,
      SearchSong,
      open,
       dialogFormVisible,
      formLabelWidth,
      form,
      loginButn,
      breakLogin,
      auth,
      chenageAuth,
      loginFormButn
    };
  },

  
});
</script>


<style scoped lang="less">
.hander-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  .hander-Title{
      font-size: 20px;
  }

}
.el-input{
  width: 250px;
}
/* element 自带样式 */
.demo-basic {
  text-align: center;
}
.demo-basic .sub-title {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}
.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.demo-basic .block {
  flex: 1;
}
.demo-basic .el-col:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
</style>